<template>
    <div class="person-information">
        <div class="head-portrait">
            <img :src="$store.state.userInfo.avatarUrl" />
        </div>
        <div class="information">
            <div class="nickname">
                <em>{{ profile.nickname }}</em
                ><span><em>L</em>v.{{ level }}</span>
                <button class="edit">编辑个人资料</button>
            </div>
            <div class="event-follows-followeds">
                <div>
                    <span>{{ profile.eventCount }}</span>
                    <br />
                    <span>动态</span>
                </div>
                <div>
                    <span>{{ profile.follows }}</span>
                    <br />
                    <span>关注</span>
                </div>
                <div>
                    <span>{{ profile.followeds }}</span>
                    <br />
                    <span>粉丝</span>
                </div>
            </div>
            <p>所在地区：?</p>
            <p>社交网络：?</p>
        </div>
    </div>
</template>

<script setup>
import { getCurrentInstance, reactive, toRefs } from "vue";
const axios = getCurrentInstance().proxy.$http;

const props = defineProps({
    userId: Number,
});

const home_information = reactive({
    level: null,
    profile: {},
});

axios.get("/user/detail", {
    params: {
        uid: props.userId,
    },
}).then((value) => {
    let { data } = value;
    home_information.level = data.level;
    home_information.profile = data.profile;
});

const { level, profile } = toRefs(home_information);
</script>

<style lang='less' scoped>
.person-information {
    height: 188px;
    margin-bottom: 40px;
    display: flex;
    .head-portrait {
        width: 180px;
        height: 180px;
        border: 1px solid #ccc;
        padding: 4px;
        margin-right: 40px;
        img {
            width: 180px;
            height: 180px;
        }
    }
    .information {
        flex-grow: 1;
        height: 188px;
        .nickname {
            height: 50px;
            border-bottom: 1px solid #ccc;
            line-height: 50px;
            margin-bottom: 5px;
            em {
                font-size: 25px;
            }
            span {
                margin-left: 20px;
                border: 1px solid red;
                border-radius: 30px;
                padding: 0 5px;
                color: red;
                em {
                    font-size: 22px;
                    font-family: "Courier New", Courier, monospace;
                    font-weight: 600;
                }
            }
            .edit {
                margin-top: 10px;
                float: right;
                font-size: 13px;
                padding: 5px 20px;
                background: linear-gradient(to bottom, white, #ccc);
                border: 1px solid rgb(209, 208, 208);
                cursor: pointer;
                &:hover {
                    background: linear-gradient(to left top, white, #ccc);
                }
            }
        }

        .event-follows-followeds {
            height: 40px;
            margin-bottom: 30px;
            margin-top: 15px;
            div {
                float: left;
                width: 70px;
                height: 100%;
                border-right: 1px solid #ccc;
                line-height: 20px;
                &:nth-child(n + 2) {
                    margin-left: 20px;
                }
                &:last-child {
                    border: none;
                }
                span {
                    &:first-child {
                        font-size: 25px;
                        font-weight: 600;
                        color: rgb(139, 139, 139);
                    }
                    &:last-child {
                        font-size: 12px;
                        color: rgb(90, 89, 89);
                    }
                }
            }
        }
        p {
            color: rgb(90, 89, 89);
            font-size: 12px;
            margin-top: 10px;
        }
    }
}
</style>